<template>
  <div class="orderList">
    <div class="fixTitle">
      <div style="padding-right: 33.5rem">
        商品
      </div>
      <div style="padding-right: 5.63rem">
        状态
      </div>
      <div style="padding-right: 6.81rem">
        退款金额
      </div>
      <div>订单操作</div>
    </div>
    <div class="orderTable">
      <div
        v-for="item in orderList"
        :key="item.id"
        class="orderBox"
      >
        <div
          v-for="(items, index) in item.oSaleReturnDetails"
          :key="index"
          class="order"
        >
          <div class="orderNo_box">
            <div class="orderNo">
              <div class="orderInfo">
                <div>
                  <span class="ot">订单号</span>
                  <span class="od">{{ item.cOrderNo }}</span>
                </div>
                <div>
                  <span class="ot">退换货编号</span>
                  <span class="od">{{ item.cSaleReturnNo }}</span>
                </div>
                <div>
                  <span class="ot">申请时间</span>
                  <span class="od">{{ item.pubuts | formatDate }}</span>
                </div>
              </div>
              <!-- <img
                src="../../assets/img/delete.png"
                alt=""
                @click="showDelModal(item)"
              > -->
            </div>
          </div>
          <div class="goods_box">
            <!-- <img
              src="../../assets/img/radio.png"
              alt=""
            > -->
            <div class="goods">
              <img
                :src="items.oProductAlbum.imgUrl"
                alt=""
                @click="GoToSho(items)"
              >
              <div class="titleBox">
                <div class="tls">
                  {{ items.cProductName }}
                </div>
              </div>
            </div>
            <div class="orderStatus">
              <div class="status">
                <!-- 退货状态：”SUBMITSALERETURN” (待审批); “CONFIRMSALERETURNORDER” (待退货); “BUYERRETURN” (待退款) ; “ENDSALERETURN” (已完成); “OPPOSESALERETURN” (已驳回) -->
                {{
                  item.cSaleReturnStatus === "SUBMITSALERETURN"
                    ? "待审批"
                    : item.cSaleReturnStatus === "CONFIRMSALERETURNORDER"
                      ? "待退货"
                      : item.cSaleReturnStatus === "BUYERRETURN"
                        ? "待退款"
                        : item.cSaleReturnStatus === "ENDSALERETURN"
                          ? "已完成"
                          : item.cSaleReturnStatus === "OPPOSESALERETURN"
                            ? "已驳回"
                            : item.cSaleReturnStatus === "CANCELSALERETURN"
                              ? "取消退款"
                              : ""
                }}
              </div>
            </div>
            <div class="amount">
              <div class="price">
                ¥{{ items.fSalePrice }}
              </div>
              <!-- <div class="fee">
                (含运费：¥{{ item.iPostage === null ? 0 : item.iPostage }}元)
              </div> -->
            </div>
            <div class="op">
              <div
                class="detail"
                @click="goDetail(items, index, item.cSaleReturnStatus)"
              >
                查看详情
              </div>
              <!-- <div
                v-if="item.cSaleReturnStatus === 'ENDSALERETURN'"
                class="cancel"
                @click="goComment(items)"
              >
                评价
              </div> -->
              <div
                v-if="item.cSaleReturnStatus === 'CONFIRMSALERETURNORDER'"
                class="cancel"
                @click="CancellationApplication(items)"
              >
                取消退货申请
              </div>
              <div
                v-if="item.cSaleReturnStatus === 'CONFIRMSALERETURNORDER'"
                class="cancel"
                @click="PleaseReturn(items)"
              >
                请退货
              </div>
              <div
                v-if="item.cSaleReturnStatus === 'OPPOSESALERETURN'"
                class="cancel"
                @click="Modify(items)"
              >
                再次申请
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination_box">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="PageTotal"
        :current-page.sync="pageIndex"
        @current-change="handleCurrentChange"
      />
    </div>
    <deleteModal
      ref="delModal"
      @refresh="getData(status, search)"
    />

    <!--请退货--->
    <div
      v-if="showModalStatus"
      class="overDiv"
    >
      <div
        v-if="!showReasonModalStatsus"
        class="cancelModal"
      >
        <div class="header">
          <div class="title" />
          <div
            class="colse"
            @click="closeModalModal"
          >
            <img
              src="../../assets/img/close.png"
              alt=""
            >
          </div>
        </div>
        <div class="body">
          <el-form
            :inline="true"
            :model="showformInline"
            :label-position="labelPosition"
            label-width="100px"
            class="demo-form-inline"
          >
            <el-form-item label="物流公司">
              <el-select
                v-model="showformInline.logisticCorpId"
                placeholder="请选择"
                style="width: 19.69rem;"
                @change="selectReason"
              >
                <el-option
                  v-for="item in EMSListData"
                  :key="item.id"
                  v-model="item.id"
                  :label="item.name"
                  style="width: 19.69rem; height: 2.44rem; border-radius: 0"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="物流单号">
              <el-input
                v-model="showformInline.logisticsNo"
                placeholder="请输入物流单号"
                style="width: 19.69rem; height: 2.44rem; border-radius: 0"
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="footer">
          <div
            class="yes"
            @click="YESModalModal"
          >
            是
          </div>
          <div
            class="no"
            @click="closeModalModal"
          >
            否
          </div>
        </div>
      </div>
      <!--请退货END--->
    </div>
  </div>
</template>

<script>
import deleteModal from "../common/deleteModal.vue";
export default {
  components: {
    deleteModal,
  },
  props: {
    status: {
      type: String,
      default: "",
    },
    search: {
      type: Object,
      default: function () {
        return {
          searchSaleReturnNo: "", // 退货单号
          searchOrderNo: "", // 订单编号
          searchTimer: [], // 申请时间
        };
      },
    },
  },
  data() {
    return {
      newStatus: "",
      showModal: false,
      showModalStatus:false,
      showReasonModalStatsus: false,
      orderList: [],
      count: "",
      pageIndex: 1,
      pageSize: 10,
      currentItem: {},
      PageTotal: 0,
      EMSListData: [],
      labelPosition: "left",
      newSearchForm: {
        searchTimer: [], // 申请时间
      },
      SearchForm: {
        searchSaleReturnNo: "", // 退货单号
        searchOrderNo: "", // 订单编号
        searchTimer: [], // 申请时间
      },
      showformInline:{
        logisticCorpId: '', // 	物流公司id
        logisticsNo: '', // logisticsNo
        detailId: '', // 订单行id
        orderNo: '', // 	订单编号
        cCourierName: "", // // 配送员姓名
        cCourierPhone: "" // 配送员电话
      }
    };
  },
  watch: {
    status: function () {
      this.newStatus = this.status;
      this.orderList = [];
      this.SearchForm = {
        searchSaleReturnNo: "", // 退货单号
        searchOrderNo: "", // 订单编号
        searchTimer: [], // 申请时间
      };
      this.pageIndex = 1;
      this.getData(this.newStatus, this.SearchForm);
    },
  },

  created() {},
  mounted() {
    //获取订单列表
    this.getData(this.newStatus, this.SearchForm);
    this.getLogisticsCorpData()
  },

  methods: {
    // 获取物流公司
    getLogisticsCorpData() {
      let params = {
        token: localStorage.getItem("token"),
        data: {
          'onLineOffLine': 0,
          'orderType': 2,
        }
      }
      this.$api.person.getLogisticsCorp(params).then(res=>{
        console.log('获取物流公司', res)
        this.EMSListData = res.data
      })
    },
    // 获取搜索对象
    SearchObj(SearchObj) {
      this.SearchForm = SearchObj;
      console.log("SearchObj", SearchObj, this.SearchForm);
      this.getData(this.newStatus, this.SearchForm);
    },
    //取消订单
    cancelOrder(item) {
      this.currentItem = item;
      this.$refs.delModal.showM("cancel");
      this.$refs.delModal.getItem(item);
      this.$refs.delModal.newStatus(this.newStatus);
    },
    //关闭取消订单 弹窗
    closeModal() {
      this.showModal = false;
    },
    // 关闭取消订单 弹窗
    closeModalModal() {
      this.showModalStatus = false
    },
    // 去详情
    GoToSho(GoToSho) {
      console.log("去详情", GoToSho);
      this.$router.push({
        path: "/fruit/detail",
        query: {
          id: GoToSho.iProductId,
          iShopId: GoToSho.iShopId
        },
      });
    },
    //查看详情path: `/person/returnlistorderdetail?cSaleReturnNo=${DetailsRefund.cOrderNo}&index=${index}`
    goDetail(item,index, cSaleReturnStatus) {
      console.log("items", item);
      this.$router.push({
        path: "/person/returnlistorderdetail",
        query: {
          cOrderNo: item.cOrderNo,
          cSaleReturnNo: item.cSaleReturnNo,
          index: index,
          cSaleReturnStatus: cSaleReturnStatus,
        },
      });
    },
    //去评价
    goComment(item) {
      this.$router.push({
        path: "/person/comment",
        query: {
          cOrderNo: item.cOrderNo,
        },
      });
    },
    // 取消退款申请
    CancellationApplication(item) {
      console.log("取消退款申请", item.cSaleReturnNo);
      this.$refs.delModal.showM("CancelRefund");
      this.$refs.delModal.getItem(item);
    },
    // 再次申请
    Modify(item) {
      console.log("修改", item);
      this.$router.push({
        path: `/person/exchange?orderNo=${item.cOrderNo}&cSaleReturnNo=${
          item.cSaleReturnNo
        }&Modify=${"Modify"}`,
      });
    },
    // 分页获取当前页
    handleCurrentChange(val) {
      console.log("分页获取当前页", val);
      this.pageIndex = val;
      this.getData(this.newStatus, this.SearchForm);
    },
    // 获取退货列表
    getData(statusName, SearchForm) {
      console.log("获取退货列表", statusName, SearchForm);
      if (SearchForm.length === 0) {
        let params = {
          token: localStorage.getItem("token"),
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          status: statusName,
          searchSaleReturnNo: SearchForm.searchSaleReturnNo, // string   退货单号
          searchOrderNo: SearchForm.searchOrderNo, // string 订单编号（已有）
        };
        this.$api.person.getSaleReturnList(params).then((res) => {
          if (res.code == 200) {
            console.log("获取订单列表", res.data);
            this.orderList = res.data.list; // 订单列表
          }
        });
      } else {
        let params = {
          token: localStorage.getItem("token"),
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          status: statusName,
          searchSaleReturnNo: SearchForm.searchSaleReturnNo, // string   退货单号
          searchOrderNo: SearchForm.searchOrderNo, // string 订单编号（已有）
          startDate: SearchForm.searchTimer[0], // 开始时间
          endDate: SearchForm.searchTimer[1], // Array, 成交日期，[开始时间,结束时间]，如：['2021-03-17','2021-04-13']
        };
        this.$api.person.getSaleReturnList(params).then((res) => {
          if (res.code == 200) {
            console.log("获取订单列表", res.data);
            this.orderList = res.data.list; // 订单列表
            this.PageTotal = res.data.count;
          }
        });
      }
    },
    //删除订单弹窗
    showDelModal(item) {
      console.log("删除订单弹窗", item);
      this.$refs.delModal.showM("delete", "order");
      this.$refs.delModal.newStatus(this.newStatus);
      this.$refs.delModal.getItem(item);
      this.currentItem = item;
    },
    // 付款
    Payment(Payment) {
      console.log("Payment", Payment);
      let paydata = {
        cOrderNo: Payment.cOrderNo, // 订单号
        paytype: 1, // 支付类型(1：表示线上支付, 2: 线下支付)
        remark: "营家支付", // 标记
        paytypecode: "construct", // 支付方式（chanpay：畅捷支付，alipay：支付宝支付,weixin:微信支付， construct：营家支付）
        payBackUrl: "/client/Pay/payNotify?paytypecode=construct",
      };
      let par = {
        token: localStorage.getItem("token"),
        data: paydata,
      };
      this.$api.good.buildPayment(par).then((res) => {
        if (res.code == 200) {
          let type = "CASHIER_PAY_PC";
          let paramsdata = {
            token: localStorage.getItem("token"),
            uid: JSON.parse(localStorage.getItem("userInfo")).mid,
            pay_no: res.data.cPayNo,
            order_no: Payment.cOrderNo,
            // page_url: `http://youyou.tangmu.xin/pc/#/payType?cOrderNo=${Payment.cOrderNo}&type=1`, // 测试
            page_url: `https://mall.inja.com/#/payType?cOrderNo=${Payment.cOrderNo}&type=1`,  // 正式
            amount: Payment.fSalePrice,
            type: type,
          };
          this.$api.good.pay(paramsdata).then((res) => {
            if (res.code == 1) {
              let ur = this.urlEncode(res.data);
              let xx = ur.substr(0, 1);
              let yy = ur.replace(xx, "?");
              console.log("跳转支付PAY", yy);
              window.location.href = "https://ipay.inja.com/gateway/cashier/acquiring?dd=1" + ur; //正式环境
              // window.location.href = "http://ipay.ysyec.com/gateway/cashier/acquiring?dd=1" + ur; //测试环境
            }
          });
        }
      });
    },
    // 请退货
    PleaseReturn(PleaseReturn) {
      console.log("请退货", PleaseReturn, this.showformInline);
      this.showformInline.detailId = PleaseReturn.iDetailId // 订单行id
      this.showformInline.orderNo = PleaseReturn.cOrderNo // 订单编号
      this.showModalStatus = true
    },
    // 确认
    YESModalModal() {
      
      console.log('确认', this.showformInline)
      let params = {
        token: localStorage.getItem("token"),
        data: {
          detailId: this.showformInline.detailId,
					orderNo: this.showformInline.orderNo,
					logisticCorpId: this.showformInline.logisticCorpId,
					logisticsNo: this.showformInline.logisticsNo
        }
      }
      this.$api.person.returnGoods(params).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message);
          this.showModalStatus = false
          this.getData(this.newStatus, this.SearchForm);
        } else {
          this.$message.error(res.message);
        }
      })
    },
    //转码
    urlEncode(param, key, encode) {
      if (param == null) return "";
      var paramStr = "";
      var t = typeof param;
      if (t == "string" || t == "number" || t == "boolean") {
        paramStr +=
          "&" +
          key +
          "=" +
          (encode == null || encode ? encodeURIComponent(param) : param);
      } else {
        for (var i in param) {
          var k =
            key == null
              ? i
              : key + (param instanceof Array ? "[" + i + "]" : "." + i);
          paramStr += this.urlEncode(param[i], k, encode);
        }
      }
      return paramStr;
    },
  },
};
</script>

<style scoped lang="scss">
.orderList {
  margin: 1.25rem 0;

  .fixTitle {
    height: 3.13rem;
    background: #fff;
    line-height: 3.13rem;
    font-size: 0.88rem;
    color: #333;
    display: flex;
    flex-direction: row;
    padding: 0 2.19rem;
  }

  .orderTable {
    // height: 62rem;
    // overflow-y: scroll;
    max-height: 57rem;
    overflow: auto;
  }

  .orderBox {
    // height: 15.81rem;
    background: #fff;
    margin-bottom: 0.56rem;
    .order {
      .orderNo_box {
        .orderNo {
          background-color: #f6f6f6;
          height: 3rem;
          line-height: 3rem;
          display: flex;
          flex-direction: row;
          padding: 0 1.44rem 0 2.19rem;
          font-size: 0.75rem;
          justify-content: space-between;
          align-items: center;

          .orderInfo {
            display: flex;
            flex-direction: row;

            > div {
              margin-right: 2.69rem;

              .ot {
                color: #666;
                padding-right: 0.75rem;
              }

              .od {
                color: #7b7b7b;
              }
            }
          }

          > img {
            width: 0.88rem;
            height: 0.94rem;
            vertical-align: middle;
            cursor: pointer;
          }
        }
      }

      .goods_box {
        > img {
          width: 0.88rem;
          height: 0.94rem;
          cursor: pointer;
          margin: 0 0.56rem 0 0.94rem;
        }

        padding: 1rem 0;
        display: flex;
        flex-direction: row;
        align-items: center;

        > div {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          &.goods {
            width: 30rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            margin-left: 1.7rem;
            .titleBox {
              width: 18rem;
            }

            .tls {
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
              color: #7b7b7b;
              font-size: 0.88rem;
              margin-bottom: 1.25rem;
              line-height: 1.2rem;
            }

            .dl {
              color: #7b7b7b;
              font-size: 0.88rem;

              &:hover {
                cursor: pointer;
                text-decoration: underline;
              }
            }

            > img {
              width: 6rem;
              height: 6rem;
              cursor: pointer;
              margin-right: .69rem;
            }
          }

          &.type {
            font-size: 0.88rem;
            color: #7b7b7b;
            width: 5.5rem;
            display: flex;
            flex-direction: column;
            line-height: 1.5;

            .opreate {
              color: #f0406f;
              font-size: 0.88rem;

              &:hover {
                cursor: pointer;
                text-decoration: underline;
              }
            }
          }

          &.orderStatus {
            width: 11rem;
            font-size: 0.88rem;
            line-height: 1.5;

            .status {
              color: #7b7b7b;
              line-height: 1.44rem;
            }

            .again {
              color: #f0406f;
              font-size: 0.88rem;

              &:hover {
                cursor: pointer;
                text-decoration: underline;
              }
            }

            .prize {
              background: #000;
              color: #fff;
              padding: 0.08rem 0.88rem;
              cursor: pointer;

              &:hover {
                opacity: 0.8;
              }
            }
          }

          &.amount {
            font-size: 0.88rem;
            width: 8rem;

            .fee {
              color: #7b7b7b;
            }

            .price {
              line-height: 1.44rem;
              color: #333333;
              font-weight: bold;
            }
          }

          &.op {
            color: #f0406f;
            width: 12rem;
            font-size: 0.88rem;

            .detail {
              line-height: 1.44rem;
              cursor: pointer;

              &:hover {
                cursor: pointer;
                text-decoration: underline;
              }
            }

            .pay {
              background: #000;
              color: #fff;
              padding: 0.38rem 0.88rem;
              cursor: pointer;

              &:hover {
                opacity: 0.8;
              }
            }

            .cancel {
              cursor: pointer;
              line-height: 1.5;

              &:hover {
                cursor: pointer;
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  }
  .pagination_box {
    display: flex;
    justify-content: center;
    height: 3rem;
    align-items: center;
  }

  .overDiv {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);

    .cancelModal2 {
      position: absolute;
      height: 31.69rem;
      width: 39rem;
      padding: 1.25rem;
      left: 50%;
      margin-left: -16.5rem;
      top: 50%;
      margin-top: -9.5rem;
      background: rgba(255, 255, 255, 1);
      z-index: 1001;

      .header {
        padding-top: 3.25rem;
        padding-left: 3.38rem;

        .title {
          font-size: 1.13rem;
          color: #333;
        }
      }

      .body {
        display: flex;
        flex-direction: column;
        padding-top: 3.56rem;

        .tips {
          width: 26rem;
          height: 9.19rem;
          font-size: 1rem;
          margin: 2rem auto 2.69rem auto;
          padding-left: 2rem;

          > div {
            line-height: 2rem;
          }

          ul {
            li {
              list-style: disc;
              font-size: 0.88rem;
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
              line-height: 1.38rem;
            }
          }
        }
      }

      .footer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        text-align: center;
        line-height: 2.56rem;

        .yes {
          width: 9.5rem;
          height: 2.5rem;
          background: rgba(0, 0, 0, 1);
          color: #fff;
          font-size: 1.13rem;
          border: 0.06rem solid #333;
          margin-right: 5.69rem;
          cursor: pointer;

          &:hover {
            opacity: 0.8;
          }
        }

        .no {
          width: 9.5rem;
          height: 2.5rem;
          background: rgba(255, 255, 255, 1);
          color: #333;
          font-size: 1.13rem;
          border: 0.06rem solid #333;
          cursor: pointer;

          &:hover {
            opacity: 0.8;
          }
        }
      }
    }

    .cancelModal {
      position: absolute;
      // height: 19rem;
      width: 33.19rem;
      padding: 1.25rem;
      left: 50%;
      margin-left: -16.5rem;
      top: 50%;
      margin-top: -9.5rem;
      background: rgba(255, 255, 255, 1);
      z-index: 1001;

      .header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        .titles {
          font-size: 1.13rem;
          color: #666666;
          padding: 0.4rem 0 0 0.5rem;
        }

        .colse {
          cursor: pointer;
          width: 1.88rem;
          height: 1.88rem;

          > img {
            width: 100%;
            height: 100%;
          }

          &:hover {
            opacity: 0.8;
          }
        }
      }

      .body {
        padding: 2.5rem 0;
        text-align: center;
        font-size: 1.13rem;
        color: #333;
      }

      .footer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        text-align: center;
        line-height: 2.56rem;

        .yes {
          width: 8.19rem;
          height: 2.56rem;
          background: rgba(0, 0, 0, 1);
          color: #fff;
          font-size: 1.13rem;
          border: 0.06rem solid #333;
          margin-right: 5.69rem;
          cursor: pointer;

          &:hover {
            opacity: 0.8;
          }
        }

        .no {
          width: 8.19rem;
          height: 2.56rem;
          background: rgba(255, 255, 255, 1);
          color: #333;
          font-size: 1.13rem;
          border: 0.06rem solid #333;
          cursor: pointer;

          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
  }
}
</style>
<style>
.pagination_box
  .el-pagination.is-background
  .el-pager
  li:not(.disabled).active {
  background-color: rgba(17, 17, 17, 1);
  color: #fff;
}
.pagination_box .el-pagination.is-background .el-pager li:hover {
  color: rgba(17, 17, 17, 1);
}
.el-select .el-input__inner{
  padding-right: 6px !important;
}
</style>